import React, { useState } from "react";
import styles from "./ShoppingCart.module.css";
import { FaHeart } from "react-icons/fa";
import { defaultAtomsRoot } from "../atomRoot";
import { useRecoilState } from "recoil";
// interface Props {

// }

// interface State {
//     isOpen: boolean;
//     count: number;
//     cartList: Array<number>
// }

// class ShopingCart extends PureComponent<Props, State> {
//     constructor(props: Props) {
//         super(props);
//         this.state = { isOpen: false, count: 0, cartList: [] };
//     }
//     showCart = (e: React.MouseEvent<HTMLButtonElement>) => {
//         // console.log(e.target); // 指向发生事件的元素
//         // console.log(e.currentTarget); // 指向事件处理绑定的元素
//         const { isOpen } = this.state;
//         // 将EventTarget 断言成 HTMLButtonElement类型
//         if ((e.target as HTMLButtonElement).nodeName === "SPAN") {
//             this.setState({ isOpen: !isOpen });
//         }
//         this.setState((prevState) => {
//             const { count } = prevState;
//             return {
//                 count: count + 1
//             }
//         }, () => {
//             console.log(this.state.count);
//         })
//     }
//     render() {
//         const disp = {
//             display: this.state.isOpen ? "block" : "none"
//         }
//         return (
//             <div className={styles.cardContainer}>
//                 <button className={styles.button} onClick={this.showCart}>
//                     <FaHeart />
//                     <span>购物车：{this.state.count}(件)</span>
//                 </button>
//                 <div className={styles.cartDropDown} style={disp}>
//                     <ul>
//                         <li>robot 1</li>
//                         <li>robot 2</li>
//                     </ul>
//                 </div>
//             </div>
//         );
//     }
// }

const ShopingCart: React.FC = (props) => {
  const [atomRoot] = useRecoilState(defaultAtomsRoot);
  const [isOpen, setOpen] = useState<boolean>(false);
  const handleOpen = () => {
    setOpen((isOpen) => {
      return (isOpen = !isOpen);
    });
  };
  return (
    <div className={styles.cardContainer}>
      <button className={styles.button} onClick={handleOpen}>
        <FaHeart />
        <span>购物车：{atomRoot.shoppingCart.items.length}(件)</span>
      </button>
      <div
        className={styles.cartDropDown}
        style={{ display: isOpen ? "block" : "none" }}
      >
        <ul>
          {atomRoot.shoppingCart.items.map((item) => {
            return <li key={item.id}>{item.name}</li>;
          })}
        </ul>
      </div>
    </div>
  );
};

export default ShopingCart;
